<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>DOM</title>
	</head>
	<body>
		<h1>DOM介绍与查找元素</h1>
		<p>D(文档)可以理解为整个web加载的网页文档；O(对象)可以理解为window对象之类的东西，可以调用属性和方法
		，这里通常指document对象；M(模型)可以理解为网页文档的树形结构</p>
		<div>ps 在ie中的所有DOM对象是以COM对象的形式实现的，这意味着IE中的DOM可能会和其他浏览器有一定的差异</div>
	</body>
	<h2>节点</h2>
	<div>在加载html页面时，Web浏览器生成一个树型结构用来表示页面内部结构，
		DOM将这种数型结构理解为由节点组成。节点标签也称为元素
	<br />
	<span>节点的种类</span>
	1元素节点 2文本节点 3属性节点
	</div>
	<div>查找元素:
		1：getElementById('id');参数是一个元素的id值，这样就可以获取到该元素节点。
		如果赋值  xxx=value;//表示赋值
		document.getElementById().tagName;//获取标签
		document.getElementById().innerHTML;//获取文本，标签可以解析
		document.getElementById().id//获取元素节点id属性的值
		document.getElementById().title//获取title属性的值
		document.getElementById().style.color ;//获取元素属性style中的color值
		document.getElementById().className;//获取class 属性的值
		以上是html属性的直接调用
		
		<br />
		2 var li =document.getElementsByTagName('li')//参数传递一个标签名即可，返回一个数组集合，HTMLCollection
		li.length//返回li数组的数量
		li[0]//li的第一个节点对象，HTMLElement
		li.item(0)//同上
		li.tagName//
		li.innerName
		
		<br />
		3 :document.getElementsByName()//参数传入一个name值，返回一个集合
		//注意ie浏览器在获取不合法的html中的name时，会获取不到，比如name本身不是div的属性，ie会忽略掉；一般在input
		
		<br />
		4:getAttribute()方法将获取元素中某个属性的值它和直接使用属性获取属性值得方法有一定区别。
		document.getElementById('box').getAttribute('aaa');//可以获取自定义属性值且兼容
		//ps 获取自定义属性时兼容，但是已有元素可能不兼容
		<br />
		5 setAttribute('title','标题');//创建一个属性和属性值
		document.getElementById('box').setAttribute('title','标题')
		<br />
		
		6:removeAttribute();可以移除html属性
			document.getElementById('box').removeAttribute('style')
		<br />
		注意DOM操作必须等待HTML文档加载完毕，才可以获取。
		1 js函数放在后面 2 window.onload = function(){}
	</div>
	
	
	<script>
	var all =document.getElementsByTagName('*');//获取所有标签
	alert(all.length);//注意由于火狐浏览器的firebug打开后会自动创建一个div,所以会多算一个。
	alert(all[0].tagName);//HTML；注意由于ie把<!文档声明也算进去>所以是 ！
	
	document.setAttribute()
	
	</script>
</html>
